import { Typography, Button } from 'antd'
import React, { useState } from 'react'
import ProCard from '@ant-design/pro-card'
import styles from './index.less'

import MonacoEditor from 'react-monaco-editor'
import { useMount, useUnmount } from '@umijs/hooks'
import { HttpUatCheckStatus, HttpUatLog, HttpUatStart, HttpUatStop } from '@/services'

const { Title, Paragraph, Text, Link } = Typography

const UatPage: React.FC<{}> = () => {
    const [status, setStatus] = useState({ status: '未知', value: 0 })
    const [loading, setLoading] = useState(false)
    const [log, setLog] = useState('# 暂无日志')
    const [timer, setTimer] = useState<any>(null)
    useMount(async () => {
        await check()
    })
    useUnmount(() => {
        if (timer) clearTimeout(timer)
    })
    const run = async () => {
        await check()
        await HttpUatStart()
    }
    const stop = async () => {
        await check()
        await HttpUatStop()
    }
    const check = async () => {
        setLoading(true)
        const { data } = await HttpUatCheckStatus()
        setStatus(data)
        const logRes = await HttpUatLog()
        setLog(logRes?.data?.log || '# 暂无日志')
        if (data.value === 1 || data.value === 3) {
            const t = setTimeout(async () => {
                await check()
            }, 5000)
            setTimer(t)
        } else {
            setLoading(false)
        }
    }
    return (
        <div className={styles.container}>
            <ProCard
                title='服务器状态'
                extra='西安贝图科技有限公司测试环境'
                split='horizontal'
                style={{ height: '100%' }}
                bordered
                headerBordered>
                <ProCard split='horizontal'>
                    <ProCard split='vertical'>
                        <ProCard colSpan={4} style={{ textAlign: 'center' }}>
                            {status.value === 3 || status.value === 2 ? (
                                <Button
                                    {...{
                                        type: 'primary',
                                        size: 'large',
                                        danger: true,
                                        loading,
                                        onClick: stop,
                                    }}>
                                    停止
                                </Button>
                            ) : (
                                <Button
                                    {...{
                                        type: 'primary',
                                        size: 'large',
                                        loading,
                                        onClick: run,
                                    }}>
                                    启动
                                </Button>
                            )}
                        </ProCard>
                        <ProCard
                            {...{
                                colSpan: 4,
                                style: { fontSize: 14, textAlign: 'center', lineHeight: '35px' },
                            }}>
                            {status.status}
                        </ProCard>
                    </ProCard>
                </ProCard>
                <ProCard style={{ height: '100%' }}>
                    <MonacoEditor
                        {...{
                            height: '100%',
                            theme: 'vs-dark',
                            value: log,
                            options: {
                                readOnly: true,
                                colorDecorators: true,
                                wordWrap: 'on',
                                minimap: { enabled: false },
                            },
                        }}
                    />
                </ProCard>
            </ProCard>
        </div>
    )
}

export default UatPage
